<template>
  <div class="container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="当前订单" name="first">
        <div class="orderList">
          <el-card
            v-for="order in currentOrders"
            :key="order.id"
            class="order box-card"
          >
            <div slot="header" class="clearfix flex-row">
              <div class="headerInfos">
                <div>取餐号：{{ order.takeCode }}</div>
                <div>订单编号：{{ order.id }}</div>
              </div>
              <div class="btnList">
                <el-button type="text" @click="handleOut(order.id)"
                  >出餐</el-button
                >
              </div>
            </div>
            <div class="teaList">
              <div
                v-for="(item, index) in order.details"
                :key="index"
                class="tea flex-row align-center"
              >
                <el-image
                  style="width: 100px; height: 100px"
                  fit="fill"
                  :src="$img + item.image"
                ></el-image>
                <div class="teaInfo flex-row">
                  <div>{{ item.name }}</div>
                  <div class="specs" v-if="item.specItem.length">
                    <span>规格</span>
                    <div class="flex-col">
                      <span v-for="spec in item.specItem" :key="spec.name"
                        >{{ spec.name }}:{{ spec.values[0].value }}</span
                      >
                    </div>
                  </div>
                  <div class="materials" v-if="item.materialItem">
                    <span>小料</span>
                    <div class="flex-col">
                      <span>{{ item.materialItem }}</span>
                    </div>
                  </div>
                </div>
                <div class="num flex-grow" style="text-align: end">
                  x{{ item.num }}
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <!-- 全部订单 begin -->
      <el-tab-pane label="全部" name="second">
        <el-table :data="allOrders" style="width: 100%">
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="type" label="类型"> </el-table-column>
          <el-table-column prop="takeCode" label="取餐号"> </el-table-column>
          <el-table-column prop="status" label="状态"> </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 全部订单 end -->
    </el-tabs>
  </div>
</template>

<script>
import OrderApi from "@/api/OrderApi.js"
import {mapActions, mapState} from "vuex"

export default {
  data() {
    return {
      activeName: "first",
      allOrders: [],
    };
  },
  computed:{
    ...mapState("orders",["currentOrders"])
  },
  created() {
    this.getData();
  },
  methods: {
    ...mapActions("orders",["getCurrentOrders"]),
    handleOut(id) {
      OrderApi.outOrder(id).then((res) => {
        if (res.code == 1) {
          this.$message({
            content: "出餐成功",
            type: "success",
          });
          this.getData();
        }
      });
    },
    getData() {
      OrderApi.getAll().then((res) => {
        this.allOrders = res.data;
      });
      this.getCurrentOrders()
    },
  },
};
</script>

<style scoped>
.container {
  font-size: 15px;
}
.btnList {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}
.orderList {
  display: flex;
  flex-direction: column;
  row-gap: 1.6rem;
  padding: 10px 10px;
}

.teaInfo {
  padding: 0 1rem;
  column-gap: 1.6rem;
}
</style>